<template>
  <div>
    <el-card class="box-card">
      <!--面包屑导航 -->
      <div slot="header"
           class="clearfix">
        <bread :navone="'用户管理'" :navtwo="'用户列表'"/>
      </div>
      <!-- 搜索框和添加按钮 -->
      <el-row>
        <el-col :span="8">
          <!-- 搜索框 -->
          <el-input placeholder="请输入内容"
                    class="input-with-select"
                    v-model='search'>
            <el-button slot="append"
                       icon="el-icon-search"
                       @click='searchuser'></el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          &nbsp;
          <el-button type="success"
                     plain
                     @click='dialogFormVisible = true'>添加按钮</el-button>
          <!-- 添加用户表单 -->
          <el-dialog title="添加用户"
                     :visible.sync="dialogFormVisible">
            <el-form :model="form"
                     :rules='rules'
                     ref='ruleForm'
                     label-position='right'>
              <el-form-item label="用户名"
                            :label-width="formLabelWidth"
                            prop="username">
                <el-input type='text'
                          v-model='form.username'
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码"
                            :label-width="formLabelWidth"
                            prop="password">
                <el-input v-model='form.password'
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱"
                            :label-width="formLabelWidth">
                <el-input v-model='form.email'
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话"
                            :label-width="formLabelWidth">
                <el-input v-model='form.mobile'
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click='adduser'>确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData"
                style="width: 100%"
                :border="true">
        <!-- 序号列 -->
        <el-table-column type="index"
                         width="50"></el-table-column>
        <!-- 用户名列 -->
        <el-table-column property="username"
                         label="姓名"></el-table-column>
        <!-- 邮箱列 -->
        <el-table-column property="email"
                         label="邮箱"></el-table-column>
        <!-- 手机列 -->
        <el-table-column property="mobile"
                         label="电话"></el-table-column>
        <!-- 状态列 -->
        <el-table-column label="用户状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state"
                       @change='statuschange(scope.row.id,scope.row.mg_state)'
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary"
                       icon="el-icon-edit"
                       size='mini'
                       @click='getoneuser(scope.row.id)'
                       plain></el-button>
            <!-- 修改的对话框 -->
            <el-dialog title="修改用户"
                       :visible.sync="editformVisible">
              <el-form :model="form"
                       :rules='rules'
                       ref='ruleForm'
                       label-position='right'>
                <el-form-item label="用户名"
                              :label-width="formLabelWidth"
                              disabled='true'
                              prop="username">
                  <el-input type='text'
                            :disabled="true"
                            v-model='form.username'
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱"
                              :label-width="formLabelWidth">
                  <el-input v-model='form.email'
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话"
                              :label-width="formLabelWidth">
                  <el-input v-model='form.mobile'
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="editformVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click='edituser'>确 定</el-button>
              </div>
            </el-dialog>
            <!-- 删除 -->
            <el-button type="danger"
                       icon="el-icon-delete"
                       size='mini'
                       @click='deleteuser(scope.row.id)'
                       plain></el-button>
            <!-- 角色选择 -->
            <el-button type="success"
                       icon="el-icon-check"
                       size='mini'
                       @click='getformcheck(scope.row.id)'
                       plain></el-button>
            <!-- 角色选择对话框 -->
            <el-dialog title="分配角色"
                       :visible.sync="fenpeiformVisible">
              <el-form :model="form"
                       ref='ruleForm'
                       label-position='right'>
                <el-form-item label="用户名"
                              :label-width="formLabelWidth">
                  {{form.username}}
                </el-form-item>
                <el-form-item label="请选择角色"
                              :label-width="formLabelWidth">
                  <!-- select的绑定value值,会去匹配选项中对应的valeu值,当匹配到,就将绑定的label值选中 -->
                  <el-select v-model="value"
                             placeholder="请选择">
                    <el-option :value='-1'
                               :label="'请选择角色'"
                               disabled="true"></el-option>
                    <el-option v-for="item in options"
                               :key="item.id"
                               :label="item.roleName"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="fenpeiformVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click='editroles(form.id)'>确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import bread from '../bread/bread.vue'
export default {
  components: {
    bread
  },
  created () {
    this.getusers()// 加载页面初始化表格数据
    this.getroles() // 获取角色列表,应用于角色分配表单中
  },
  data () {
    return {
      tableData: {}, // 表格数据
      pagenum: 1, // 第几页
      pagesize: 10, // 页容量
      dialogFormVisible: false, // 控制添加表单显示
      editformVisible: false, // 控制修改表单显示
      fenpeiformVisible: false, // 控制分配用户表单的显示
      formLabelWidth: '120px', // 添加与修改表单的宽度
      form: { // 表单数据
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      rules: { // 添加表单验证规则
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      search: '', // 搜索框的内容
      options: [], // 角色选择下拉框内容
      value: '' // 角色选择下拉框选中的值
    }
  },
  methods: {
    // 获取表格数据
    getusers () {
      this.$http.get('users', {
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          query: this.search

        }
      }).then(res => {
        this.tableData = res.data.data.users
      })
    },
    // 获取所有角色
    async getroles () {
      let res = await this.$http.get('roles')
      let { meta, data } = res.data
      if (meta.status === 200) {
        this.options = data
      }
    },
    // 添加用户
    adduser () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http.post('users', this.form).then(res => {
            let { meta } = res.data
            if (meta.status === 201) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.getusers()
              this.$refs.ruleForm.resetFields()
              this.dialogFormVisible = false
            } else {
              this.$message.error('账号或密码为必填项!')
            }
          })
        }
      })
    },
    // 删除用户
    deleteuser (id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$http.delete(`users/${id}`)
        let { meta } = res.data
        if (meta.status === 200) {
          this.$message({
            type: 'success',
            message: meta.msg
          })
          this.getusers()
        } else {
          this.$message.error(meta.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索用户
    async searchuser () {
      this.getusers()
    },
    // 打开用户获取数据
    async getoneuser (id) {
      this.editformVisible = true
      let res = await this.$http.get(`users/${id}`)
      let { data, meta } = res.data
      if (meta.status === 200) {
        this.form = data
      }
    },
    // 修改用户
    async edituser () {
      let res = await this.$http.put(`users/${this.form.id}`, this.form)
      let { meta } = res.data
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })
        this.editformVisible = false
        this.getusers()
      } else {
        this.$message.error(meta.msg)
      }
    },
    // 打开角色选择表单获取数据
    async getformcheck (id) {
      this.fenpeiformVisible = true
      let res = await this.$http.get(`users/${id}`)
      let { data, meta } = res.data
      if (meta.status === 200) {
        this.form = data
        this.value = this.form.rid
      } else {
        this.$message.error(meta.msg)
      }
    },
    // 修改用户角色
    async editroles (id) {
      let res = await this.$http.put(`users/${id}/role`, { rid: this.value })
      let { meta } = res.data
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })
        this.fenpeiformVisible = false
      } else {
        this.$message.error(meta.msg)
      }
    },
    // 用户状态改变
    async statuschange (id, status) {
      let res = await this.$http.put(`users/${id}/state/${status}`)
      let { meta } = res.data
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })
      } else {
        this.$message.error(meta.msg)
      }
    }
  }
}
</script>

<style>
</style>
